<template>
  <div class="page-container">
    <div class="in-container">
      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getList"
        :autostyle="'height: 100%;'"
        :option="tableData.option"
        class="table"
      >
        <el-table-column
          prop="account"
          label="登录账号"
        />
        <el-table-column
          prop="accessToken"
          label="令牌"
        />
        <el-table-column
          prop="nickName"
          label="用户昵称"
        />
        <el-table-column
          prop="deptName"
          label="所属部门"
        />
        <el-table-column
          prop="ip"
          label="登录IP"
        />
        <el-table-column
          prop="address"
          label="IP地址"
        />
        <el-table-column
          prop="operatingSystem"
          label="操作系统"
        />
        <el-table-column
          prop="deviceType"
          label="设备类型"
        />
        <el-table-column
          prop="browserName"
          label="浏览器"
        />
        <el-table-column
          prop="version"
          label="版本号"
        />
        <el-table-column
          prop="loginTime"
          label="登录时间"
        />
        <el-table-column
          label="操作"
          width="70px"
          fixed="right"
        >
          <template #default="scope">
            <el-popconfirm
              placement="top"
              title="确定强退该用户吗？"
              @confirm="delMethod(scope.row)"
            >
              <template #reference>
                <el-button
                  size="small"
                  link
                  type="primary"
                >强退</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </AppPageTable>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppTitleBox from "@/components/AppTitleBox.vue";
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable,
    AppTitleBox,
  },
  data() {
    return {
      tableData: {
        data: [],
        option: useTableOption(),
      },
      delLoading: false,
      //退出标识符
      delTk: false,
    };
  },
  methods: {
    getList() {
      this.tableData.option.loading = true;
      this.$http
        .get("/api/online/query", {
          PageIndex: this.tableData.option.page,
          PageSize: this.tableData.option.pageSize,
        })
        .then((res) => {
          this.tableData.data = res.content;
          this.tableData.option.total = res.totalElements;
          if (this.delTk) {
            this.$message.success('成功')
            this.delTk = !this.delTk
          }
        })
        .catch((err) => {
          if (err.response.status != 401) {
            this.$message.error("表格数据请求失败");
          }
        })
        .finally(() => {
          this.tableData.option.loading = false;
        });
    },
    delMethod(data, index) {
      let accessToken = data.accessToken
      const ids = [];
      if (accessToken instanceof Array) {
        accessToken.forEach((val) => {
          ids.push(val.accessToken);
        });
      } else ids.push(accessToken);
      this.delLoading = true;
      const idCollection = { idArray: [] };
      if (ids instanceof Array) {
        ids.forEach((val) => {
          idCollection.idArray.push(val);
        });
      } else {
        idCollection.idArray.push(ids);
      }
      this.$http
        .post("/api/online/out", idCollection)
        .then((res) => {
          this.delLoading = false;
          if (res.status == 200) {
            this.delTk = true
            // console.log(data.account,this.$store.state.auth.user.username)
            // if(data.account==this.$store.state.auth.user.username){
            this.$store.dispatch("auth/logout").then(() => {
              window.location.hash = "#/manageLogin"
              window.location.reload()
            });
            // }
          }
          // this.getList()
        })
        .finally(() => {
          this.delLoading = false;
        });
    },
  },
  created() {
    this.getList();
  },
});
</script>

<style lang="scss" scoped></style>
